<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap 实例 - 边框表格</title>
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>

  <body>
    <button
      type="button"
      class="btn btn-default"
      data-toggle="modal"
      data-target="#myModal"
    >
      增加
    </button>
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>
            <button type="button" class="btn btn-danger">删除</button>
            <button type="button" class="btn btn-info">修改</button>
          </td>
        </tr> -->
      </tbody>
    </table>
    <!-- 新增模态框 -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">新增城市信息</h4>
          </div>
          <div class="modal-body">
            <form action="">
              <div class="row" style="display: none">
                <label class="col-sm-2">编号:</label
                ><input class="col-sm-9" name="cityId" type="text" />
              </div>
              <div class="row">
                <label class="col-sm-2">名称:</label
                ><input class="col-sm-9" name="cityPro" type="text" />
              </div>
              <div class="row" style="margin-top: 5px">
                <label class="col-sm-2">城市:</label
                ><input class="col-sm-9" name="cityName" type="text" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button id="addBtn" type="button" class="btn btn-primary">
              保存
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改模态框 -->
    <div
      class="modal fade"
      id="myModal1"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">修改城市信息</h4>
          </div>
          <div class="modal-body">
            <form action="">
              <div class="row" style="display: none">
                <label class="col-sm-2">编号:</label
                ><input class="col-sm-9" id="cityId" type="text" />
              </div>
              <div class="row">
                <label class="col-sm-2">名称:</label
                ><input class="col-sm-9" id="cityPro" type="text" />
              </div>
              <div class="row" style="margin-top: 5px">
                <label class="col-sm-2">城市:</label
                ><input class="col-sm-9" id="cityName" type="text" />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              关闭
            </button>
            <button id="confirmBtn" type="button" class="btn btn-primary">
              提交更改
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除模态框 -->
    <div
      class="modal fade"
      id="myModal2"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-hidden="true"
            >
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">删除城市信息</h4>
          </div>
          <div class="modal-body">您确定删除该数据吗？</div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button id="clearBtn" type="button" class="btn btn-primary">
              确定
            </button>
          </div>
        </div>
      </div>
    </div>
    <script>
      const data = [
        { id: 1, name: "李四", city: "重庆" },
        { id: 2, name: "张三", city: "成都" },
        { id: 3, name: "王五", city: "西安" },
      ];
      // 渲染数据
      function renderTbody(data) {
        $("tbody").empty();
        for (let i = 0; i < data.length; ++i) {
          let item = data[i];
          $("tbody")
            .append(`<tr><td>${item.name}</td><td>${item.city}</td><td><button id="delBtn" data-id=${item.id} type="button" class="btn btn-danger" data-toggle="modal"
      data-target="#myModal2">删除</button>
            <button id="modifyBtn" data-id=${item.id} type="button" class="btn btn-info" data-toggle="modal"
      data-target="#myModal1">修改</button></td></tr>`);
        }
      }
      renderTbody(data);

      //  创建id
      let index = 0;
      function createId() {
        return index++ + "";
      }
      // 新增
      let inputArr = document.querySelectorAll("#myModal input");
      $("#addBtn").on("click", function () {
        let newData = {
          id: parseInt(createId()),
          name: $("#myModal input[name='cityPro']").val(),
          city: $("#myModal input[name='cityName']").val(),
        };
        data.push(newData);
        renderTbody(data);
        for (let i = 0; i < inputArr.length; ++i) {
          inputArr[i].value = "";
        }
        $("#myModal").modal("hide");
      });
      // 修改框回显表格数据
      $("tbody").on("click", "#modifyBtn", function (event) {
        let dataId = parseInt($(event.target).attr("data-id"));
        let currentData = data.find((item) => {
          return item.id === dataId;
        });
        $("#cityId").val(currentData.id);
        $("#cityPro").val(currentData.name);
        $("#cityName").val(currentData.city);
      });
      // 修改表格数据
      $("#confirmBtn").on("click", function () {
        let id = parseInt($("#cityId").val());
        let name = $("#cityPro").val();
        let city = $("#cityName").val();
        for (let i = 0; i < data.length; ++i) {
          let item = data[i];
          if (item.id === id) {
            item.name = name;
            item.city = city;
          }
        }
        renderTbody(data);
        $("#myModal1").modal("hide");
      });
      // 删除
      $("tbody").on("click", "#delBtn", function (event) {
        let dataId = parseInt($(event.target).attr("data-id"));
        $("#clearBtn").on("click", function () {
          for (let i = 0; i < data.length; ++i) {
            let item = data[i];
            if (item.id === dataId) {
              data.splice(i, 1);
            }
          }
          renderTbody(data);
          $("#myModal2").modal("hide");
        });
      });
    </script>
  </body>
</html>
